<template>
	<div class="teacherContainer">
		<div class="header">
			<div style="width: 68%;display: flex;justify-content: space-between;">
				<a-input v-model:value="searchData.name" :placeholder="t('control', '名称')" style="width: 180px" />
				<minDatePicker v-model:value="searchData.grade" picker="year" style="width: 180px" :placeholder="t('control', '年级')" />
				<a-select ref="select" v-model:value="searchData.learningStatus" style="width: 180px" :placeholder="t('control', '报名状态')" :options="options['报名状态']" />
				<a-select ref="select" v-model:value="searchData.recruitStatus" style="width: 180px" :placeholder="t('control', '招募状态')" :options="options['招募状态']" />
				<a-input v-model:value="searchData.teacherName" :placeholder="t('control', '指导老师姓名')" style="width: 180px" />
			</div>
			<div>
				<a-button type="primary" @click="(pagination.current=1,tableData=[],show())">{{t('control', '查询')}}</a-button>
				<a-button style="margin-left: 10px" @click="(pagination.current=1,searchData = {},classStructure=[],show())">{{t('control', '重置')}}</a-button>
			</div>
		</div>
		<div class="content">
			<div class="itemBox">
				<learnProjectItem :hasOperate="false" class="item" v-for="(item, i) in projectList" :key="item.id" :item="item"
					@handleClick="handleClick" />
				<div class="item" v-if="projectList.length%5" v-for="item in (5 - projectList.length%5)"></div>
				<a-empty  class="noData" v-if="!projectList.length">
					<template #description>{{t('common', '暂无数据')}}</template>
				</a-empty>
			</div>
			
				<div  style="min-height: 60px;display: flex;align-items: center;justify-content: center;">
					<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer
				:page-size-options="['10', '20', '50']" :total="pagination.totalElements" :pageSize="pagination.size"
				@showSizeChange="(current, size) => { pagination.size = size }" />
			</div>
		</div>
		<a-modal :maskClosable="false" width="800px" v-model:open="modal.visible"
			:ok-button-props="{ disabled: modal.formDisable }" :footer="null">
			<addAndEditProject v-model="formModel" :customUploadImage="customUploadImage" @handleSubmit="handleSubmit"
				@handleCancel="modal.visible = false" :disabled="modal.formDisable" />
		</a-modal>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import learnProjectItem from '@/components/items/learnProjectItem.vue'

import { teacherLearningPlaza, collectLearningCollect, collectLearningCancelCollect } from '@/request/learn/square'
import { learningSave, learningOnline, learningOffline, learningDelete } from '@/request/teacher/project/learn'
import minDatePicker from '@/components/common/minDatePicker.vue'

import addAndEditProject from '@/components/teacher/addAndEditProject.vue'
import { message, Modal } from 'ant-design-vue'
import { ossUpload } from '@/request/addAndEditProject'
import { t } from '@/i18n'

const options = {
	报名状态: [
		{ label: t('control', '未开始'), value: '0' },
		{ label: t('control', '招募中'), value: '1' },
		{ label: t('control', '已截止'), value: '2' },
	],
	招募状态: [
		{ label: t('control', '未招满'), value: '0' },
		{ label: t('control', '已招满'), value: '1' },
	],
}

const router = useRouter()
const projectList = ref([])
const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const customUploadImage = async info => {
	let res = await ossUpload({
		file: info.file,
		dir: 'project',
	})
	if (res) return res.data
}
const show = async (page, pageSize) => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value
	}
	let res = await teacherLearningPlaza(req)
	if (!res) return
	projectList.value = [...res.data.content]
	pagination.value = {
		...pagination.value,
		...res.data.page
	}
}
show()

const formModel = ref({ projectJobDTOList: [{}] })
const modal = reactive({ visible: false, formDisable: false, name: '' })
const handleClick = async ({ name, item }) => {
	console.log(name, '?')
	let req = { ...item }
	let res = null
	let operate = null
	switch (name) {
		case '新建项目':
			formModel.value = {
				projectJobDTOList: [{}]
			}
			modal.visible = true
			modal.formDisable = false
			modal.name = t('control','新建项目')
			break
		case 'item':
			// router.push({
			// 	name: 'learnDataDisplay',
			// 	query: {
			// 		id: item?.id,
			// 		name: item?.name,
			// 		template: item?.projectTemplate,
			// 	}
			// })
			router.push({
				name: 'learnProcessProjectDetail',
				query: {
					id: item?.id,
					name: item?.name,
					template: item?.projectTemplate,
					from: 'learnSquare'
				}
			})
			break
		case '取消收藏':
			res = await collectLearningCancelCollect(req)
			if (!res) return
			message.success(t('common', '操作成功'))
			show()
			break
		case '收藏':
			res = await collectLearningCollect(req)
			if (!res) return
			message.success(t('common', '操作成功'))
			show()
			break
		case '上线':
			res = await learningOnline(req)
			if (!res) return
			message.success(t('common', '操作成功'))
			show()
			break
		case '下线':
			res = await learningOffline(req)
			if (!res) return
			message.success(t('common', '操作成功'))
			show()
			break
		case '删除项目':
			operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: t('control','是否确认删除'),
					onOk() {
						resolve(true);
					},
					confirmText: t('common','确定'),
					cancelText: t('common','取消'),
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
			res = await learningDelete([req.id])
			if (!res) return
			message.success(t('common', '操作成功'))
			show()
			break
	}
}
const loading = ref(false)
const handleSubmit = async (val) => {
	console.log(val, '1111')
	// let v = await formRef.value.validate().catch(err => false)
	// if (!v) return message.error('请检查表单数据')  
	let req = {
		...val,
		course: val?.course.join(),
		gradeClass: val?.gradeClass.join(),
	}
	loading.value = true
	let res = await learningSave(req)
	loading.value = false
	if (!res) return
	modal.visible = false
	message.success(t('common',"保存成功"))
	show()
}
</script>

<style lang="scss" scoped>
.teacherContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		padding: 18px;
		background: #FFFFFF;
	}

	.content {
		min-height: 0;
		margin-top: 20px;
		overflow-y: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* flex-wrap: wrap; */
		border-radius: 10px;

		.itemBox {
			position: relative;
				min-height: 0;
				overflow-y: auto;
				overflow-x: hidden;
				flex-grow: 1;
				width: 100%;
				padding: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;
				.item {
					width: 19%;
					margin-bottom: 15px;
				}
			}
	}
}
</style>